<template>
  <div class="main-container">
    <div>
      <button style="height: 35px; width: 345px; background-color: #f0f0f0">通知单</button>
      <button style="height: 35px; width: 270px; background-color: #f0f0f0; margin-left: 5px">产品</button>
      <!-- 新建工艺版本 按钮 & 弹框 -->
      <el-button size="small" type="primary" style="margin-left: 30px" @click="dialogShow">新建工艺路线</el-button>
      <el-dialog width="400px" title="新建工艺路线" @close="dialogClose" :visible="dialogVisible">
        <el-form :model="createRouteParam" :rules="rules" ref="form" label-width="100px">
          <el-form-item label="版本号" prop="versionName">
            <el-input v-model="createRouteParam.versionName" placeholder="请输入版本号" class="w200"></el-input>
          </el-form-item>
          <el-form-item label="产品图号" prop="drawingNumber">
            <el-input v-model="createRouteParam.drawingNumber" placeholder="请输入产品图号" class="w200"></el-input>
          </el-form-item>
        </el-form>
        <div style="border-top: 1px solid #eee; padding: 10px 0px; background: #fefefe; text-align: center">
          <el-button type="primary" @click="createNewRoute">下一步</el-button>
          <el-button @click="dialogClose">取消</el-button>
        </div>
      </el-dialog>
      <!-- 工艺路线应用到其他产品 弹框 TODO 考虑复用 -->
      <el-dialog width="400px" title="工艺路线应用" @close="copyRouteDialogClose" :visible="copyRouteVisible">
        <el-form :model="copyRouteForm" :rules="copyRouteRules" label-width="100px">
          <el-form-item label="版本号" prop="versionName">
            <el-input id="iptC8VersionName" v-model="copyRouteForm.versionName" placeholder="请输入版本号" class="w200"></el-input>
          </el-form-item>
          <el-form-item label="产品图号" prop="drawingNumber">
            <el-input id="iptC8DrawingNumber" v-model="copyRouteForm.drawingNumber" placeholder="请输入产品图号" class="w200"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input id="iptC8Remark" type="textarea" v-model="copyRouteForm.remark" placeholder="请输入备注" class="w200"></el-input>
          </el-form-item>
        </el-form>
        <div style="border-top: 1px solid #eee; padding: 10px 0px; background: #fefefe; text-align: center">
          <el-button type="primary" @click="copyRouteToAnother">确定</el-button>
          <el-button @click="copyRouteDialogClose">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <el-container>
      <el-aside width="350px">
        <div class="notice-cards-panel">
          <template v-for="(notice, index) in noticeList">
            <div class="notice-card" :key="notice.noticeNumber" @click="showNoticeDetail(notice, index)" :style="nCardBackColors[index]">
              <div class="percent-circle">
                <el-progress type="circle" :percentage="notice.percent" color="#1989fa" :width="85"></el-progress>
              </div>
              <div class="card-title">
                <span>
                  <b>通知单号 ：</b>
                  {{ notice.noticeNumber }}
                </span>
              </div>
              <hr size="1" />
              <div class="card-content">
                <span>产 品 工 号 ：{{ notice.workingNumber }}</span>
                <br />
                <span>订 货 单 位 ：{{ notice.orderUnit }}</span>
              </div>
            </div>
          </template>
        </div>
      </el-aside>
      <el-aside width="280px">
        <div class="product-cards-panel">
          <template v-for="(product, index) in pageProductList">
            <div class="product-card" :key="product.producingId" @click="showProcessRoute(product, index)" :style="pCardBackColors[index]">
              <el-badge :value="product.state">
                <div class="card-title">
                  <span>
                    <b>图号：</b>
                    {{ product.drawingNumber }}
                  </span>
                </div>
              </el-badge>
              <hr size="1" />
              <div :class="product.drawingNumber.length > 12 ? 'card-content-long' : 'card-content-short'">
                <span>品 名 ：{{ product.productName }}</span>
                <br />
                <span>材 质 ：{{ product.materialQuality }}</span>
              </div>
            </div>
          </template>
        </div>
      </el-aside>
      <el-main>
        <div class="border-x mr10">
          <!-- 工艺路线编辑视图 -->
          <div v-if="isEditing">
            <span>&nbsp;&nbsp;版本：{{ editingRoute.versionName }}&nbsp;&nbsp;</span>
            <el-button @click="addFinishProcess()" type="text" icon="el-icon-plus" size="small">整备与完工</el-button>
            <el-table class="mt0 route-table" border stripe :data="editingRoute.processList">
              <!-- Col 1 序号 -->
              <el-table-column prop="sequenceNumber" label="序号" align="center" width="80"></el-table-column>
              <!-- Col 2 工序名称 -->
              <el-table-column prop="processName" label="工序名称" align="center" min-width="100">
                <template slot-scope="scope">
                  <el-autocomplete v-model="scope.row.processName" :fetch-suggestions="querySearch" placeholder="请输入内容"></el-autocomplete>
                </template>
              </el-table-column>
              <!-- Col 3 部门 -->
              <el-table-column prop="department" label="部门" align="center" min-width="100">
                <template slot-scope="scope">
                  <el-select v-if="scope.row.processName != '完工'" v-model="scope.row.department" filterable>
                    <template v-for="option in departmentOptions">
                      <el-option :key="option" :label="option" :value="option"></el-option>
                    </template>
                  </el-select>
                </template>
              </el-table-column>
              <!-- Col 4 单双机 -->
              <el-table-column prop="single" label="单双机" align="center" min-width="100">
                <template slot-scope="scope" v-if="scope.row.department == '加工'">
                  <el-switch style="display: block" v-model="scope.row.single" active-color="#13ce66" inactive-color="#ff4949" active-text="单" inactive-text="双"> </el-switch>
                </template>
              </el-table-column>
              <!-- Col 5 调试工时 -->
              <el-table-column prop="debugHour" label="调试工时" align="center" min-width="100">
                <template slot-scope="scope" v-if="scope.row.department == '加工'">
                  <el-input v-model="scope.row.debugHour" placeholder="调试工时"></el-input>
                </template>
              </el-table-column>
              <!-- Col 6 定额工时 -->
              <el-table-column prop="quotaHour" label="定额工时" align="center" min-width="100">
                <template slot-scope="scope" v-if="scope.row.department == '加工'">
                  <el-input v-model="scope.row.quotaHour" placeholder="定额工时"></el-input>
                </template>
              </el-table-column>
              <!-- Col 7 操作 -->
              <el-table-column label="操作" align="center" fixed="right" min-width="200">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="insertProcess(scope.row.sequenceNumber, true)">+上</el-button>
                  <el-button type="primary" size="mini" @click="insertProcess(scope.row.sequenceNumber, false)">+下</el-button>
                  <el-button type="danger" size="mini" @click="removeProcess(scope.row.sequenceNumber)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button class="mt5" size="small" type="primary" @click="save">保存</el-button>
            <el-button class="mt5" size="small" type="primary" @click="copy">保存为新版本</el-button>
            <el-button class="mt5" size="small" @click="cancel">取消</el-button>
          </div>
          <!-- 工艺路线显示视图 -->
          <div v-if="!isEditing">
            <div v-if="versionList.length > 0">
              <el-collapse accordion>
                <template v-for="(item, index) in versionList">
                  <el-collapse-item :name="index" :key="index" class="p10-x">
                    <template slot="title">
                      <div class="justify-space-between flex w-100percent">
                        <span>
                          <el-tag type="success">{{ item.versionState }}</el-tag>
                          &nbsp;&nbsp;版本: {{ item.versionName }}
                        </span>
                      </div>
                      <el-button type="primary" size="mini" @click="putIntoProduction(item)" v-if="$checkAuth('工艺路线投产提交') && item.versionState == null">投产</el-button>
                      <el-button type="primary" size="mini" @click="modifyRoute(item)" v-if="$checkAuth('修改工艺路线')">修改</el-button>
                      <el-button type="danger" size="mini" @click="deleteRoute(item)" v-if="$checkAuth('删除工艺路线')">删除</el-button>
                      <el-button type="warning" size="mini" @click="copyRouteDialogOpen(item)" v-if="$checkAuth('新建工艺路线')">应用到其他产品</el-button>
                    </template>
                    <el-table :data="item.processList" stripe border>
                      <el-table-column prop="sequenceNumber" label="序号" min-width="80" align="center"> </el-table-column>
                      <el-table-column prop="processName" label="工序" min-width="80" align="center"> </el-table-column>
                      <el-table-column prop="single" label="单机" min-width="80" align="center">
                        <template slot-scope="scope">
                          <div v-if="scope.row.department == '加工'">{{ scope.row.single ? '单机' : '双机' }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="department" label="部门" align="center" min-width="80"></el-table-column>
                      <el-table-column prop="debugHour" label="调试工时" align="center" min-width="80"></el-table-column>
                      <el-table-column prop="quotaHour" label="定额工时" align="center" min-width="80"></el-table-column>
                    </el-table>
                    <el-input type="textarea" style="margin: 10px 0" autosize v-model="item.remark" readonly></el-input>
                  </el-collapse-item>
                </template>
              </el-collapse>
            </div>
            <div v-else>
              <no-data placeholder="这里还没有数据哦，快去新建工艺路线吧~"></no-data>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import { getProcessDetail, creatVersion, designProcess, canModifyProcessRoute } from '@/api/process'
import Layout from '@/views/_common/Layout.vue'
import _ from 'lodash'

import CreateRouteDialog from './add_process_dialog.vue'
import DeleteProcess from './process_dialog.vue'
import { Message } from 'element-ui'

const vuexProcess = namespace('TwoProcess')
const vuexEnter = namespace('TwoEnter')
const vuexNotice = namespace('NewNotice')

@Component({
  components: {
    CreateRouteDialog,
    DeleteProcess,
    Layout
  }
})
export default class ProductDesign extends Vue {
  public $refs!: {
    createRouteDialog: any
  }
  // 获取已审批未完工的通知单
  @vuexEnter.Action GET_PROCESS_NOTICE: any
  @vuexEnter.State noticeList: any

  // 获取选中通知单的产品列表
  @vuexNotice.Action GET_NOTICE_DETAIL: any
  @vuexNotice.State productList: any

  // 选中的通知单产品列表
  pageProductList: any = []
  // 选中的产品
  pageProduct: any = {}

  // 通知单卡片选中时背景颜色改变
  nCardBackColors: any = []
  // 产品卡片选中时背景颜色改变
  pCardBackColors: any = []

  // 工艺路线编辑视图控制
  isEditing: boolean = false

  // 新建工艺路线弹框
  dialogVisible: boolean = false
  createRouteParam: any = {
    drawingNumber: '',
    versionName: ''
  }
  rules: any = {
    versionName: [{ required: true, message: '请填写版本号', trigger: 'blur' }],
    drawingNumber: [{ required: true, message: '请填写产品图号', trigger: 'blur' }]
  }
  copyRouteRules: any = {
    versionName: [{ required: true, message: '请填写版本名称', trigger: 'blur' }],
    drawingNumber: [{ required: true, message: '请填写图号', trigger: 'blur' }]
  }

  // 受编辑的工艺路线
  editingRoute: any = {}
  processList: any = []

  departmentOptions: any[] = ['采购', '加工', '外协']
  @vuexProcess.State processNameList: any
  @vuexProcess.Action PREDATA_VERSION: any
  @vuexProcess.Action updata_VERSION: any
  @vuexProcess.State addId: any
  @vuexProcess.Mutation SET_ADD_ID: any
  @vuexProcess.Action CREAT_VERSION: any
  /*************************
   ***** 生命周期函数 *****
   *************************/
  created() {
    this.GET_PROCESS_NOTICE()
    this.PREDATA_VERSION()
  }

  /**
   * 点击通知单卡片 显示产品详情
   */
  showNoticeDetail(data, index) {
    this.pageProduct = {}
    this.changeProductCardBGColor(-1)
    // 调整选中卡片的背景
    this.nCardBackColors = []
    for (let i = 0; i < this.noticeList.length; i++) {
      let color = i == index ? '#ADD8E6' : '#fff'
      this.nCardBackColors.push('background-color:' + color + ';')
    }
    this.getProductList(data.noticeId)
  }
  async getProductList(noticeId) {
    let result = await this.GET_NOTICE_DETAIL({ noticeId: noticeId })
    if (result) {
      this.pageProductList = []
      for (let i = 0; i < this.productList.length; i++) {
        this.pageProductList.push(this.productList[i])
        for (let j = 0; j < this.productList[i].children.length; j++) {
          this.pageProductList.push(this.productList[i].children[j])
        }
      }
    }
  }

  /**
   * 点击产品卡片 显示工艺路线
   */
  showProcessRoute(product, index) {
    if (this.isEditing) {
      this.$alert('正在编辑状态，请先保存或退出')
    } else {
      this.pageProduct = product
      // 调整选中卡片的背景
      this.changeProductCardBGColor(index)
      // 获取产品工艺路线
      this.getProcessRouteList()
    }
  }
  async getProcessRouteList() {
    let res = await getProcessDetail({ producingId: this.pageProduct.producingId })
    if (res) {
      this.versionList = res.data
    }
  }
  private changeProductCardBGColor(index) {
    this.pCardBackColors = []
    for (let i = 0; i < this.pageProductList.length; i++) {
      let color = i == index ? '#ADD8E6' : '#fff'
      this.pCardBackColors.push('background-color:' + color + ';')
    }
  }

  /**
   * 新建工艺路线
   */
  createNewRoute() {
    this.createRoute()
  }
  async createRoute() {
    let res = await creatVersion({ ...this.createRouteParam })
    if (res) {
      Message.success('创建成功')
      this.isEditing = true
      this.dialogVisible = false
      this.editingRoute = res.data
      // 响应数据中没有工序列表字段
      this.$set(this.editingRoute, 'processList', [])
      this.ifRouteEmptyAddOneProcess()
      this.sequencingProcess()
    }
  }

  dialogShow() {
    this.createRouteParam.drawingNumber = this.pageProduct.drawingNumber
    this.dialogVisible = true
  }

  dialogClose() {
    this.dialogVisible = false
  }

  /**
   * 编辑工艺路线 - 点击修改按钮
   */
  modifyRoute(route) {
    // TODO 先向后端发送请求 判断是否可以修改
    this.canModifyRoute(route)
  }
  async canModifyRoute(route) {
    let res = await canModifyProcessRoute({ versionId: route.versionId })
    if (res) {
      this.editingRoute = _.cloneDeep(route)
      this.isEditing = true
      this.ifRouteEmptyAddOneProcess()
      this.sequencingProcess()
      return true
    }
    return false
  }

  /**
   * 编辑工艺路线 - 插入工序
   * @param sequenceNumber 当前工序工序号
   * @param dir +上 / +下
   */
  insertProcess(sequenceNumber, dir) {
    let newProcessIndex = dir ? Number(sequenceNumber) - 1 : Number(sequenceNumber)
    let process = {
      sequenceNumber: newProcessIndex,
      processName: '',
      department: '',
      single: true,
      debugHour: 0.0,
      quotaHour: 0.0
    }
    this.editingRoute.processList.splice(newProcessIndex, 0, process)
    // 重新对工序列表进行sequenceNumber绑定
    this.sequencingProcess()
  }

  /**
   * 编辑工艺路线 - 保存
   */
  save() {
    if (this.validateSubmitProcessList()) {
      this.updateProcessRoute()
    }
  }
  async updateProcessRoute() {
    let result = await this.updata_VERSION({
      versionId: this.editingRoute.versionId,
      processList: this.editingRoute.processList
    })
    if (result) {
      console.log('updateProcessRoute')
      this.$message.success('保存成功')
      this.editingRoute = {}
      this.isEditing = false
      this.copyRouteDialogClose()
      this.getProcessRouteList()
    }
  }

  /**
   * 编辑工艺路线 - 保存为新版本
   */
  copy() {
    if (this.validateSubmitProcessList()) {
      this.$prompt('请输入新的版本号', '新建工艺路线：图号' + this.pageProduct.drawingNumber, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((value: any) => {
        if (String(value.value) == 'null') {
          this.$alert('版本号不能为空')
        } else {
          this.createRouteParam.drawingNumber = this.pageProduct.drawingNumber
          this.createRouteParam.versionName = String(value.value)
          this.copyToNewVersion(this.createRouteParam)
        }
      })
    }
  }
  private async copyToNewVersion(param) {
    let res = await creatVersion({ ...param })
    if (res) {
      let processList = this.editingRoute.processList
      this.editingRoute = res.data
      this.$set(this.editingRoute, 'processList', processList)
      this.save()
      Message.success('创建成功')
    }

    // this.SET_ADD_ID(0)
    // await this.CREAT_VERSION(params)
    // if (this.addId != 0) {
    //   this.editingRoute.versionName = params.versionName
    //   this.editingRoute.versionId = this.addId
    //   this.save()
    // }
  }

  copyRouteVisible: boolean = false
  copyRouteForm: any = {
    drawingNumber: '',
    versionName: '',
    remark: ''
  }
  /**
   * 应用到其他产品
   */
  copyRouteDialogOpen(route) {
    this.editingRoute = route
    this.copyRouteVisible = true
  }
  copyRouteDialogClose() {
    this.copyRouteVisible = false
  }
  copyRouteToAnother() {
    this.copyToNewVersion(this.copyRouteForm)
  }

  /**
   * 编辑工艺路线 - 取消编辑
   */
  cancel() {
    this.editingRoute = {}
    this.isEditing = false
  }

  /**
   * 编辑工艺路线 - 删除工序
   */
  removeProcess(sequenceNumber) {
    this.editingRoute.processList.splice(sequenceNumber - 1, 1)
    this.ifRouteEmptyAddOneProcess()
    this.sequencingProcess()
  }

  /**
   * 自动填充整备与完工工序
   */
  addFinishProcess() {
    let currentProcessNumber = this.editingRoute.processList.length
    let assembling = {
      sequenceNumber: 0,
      processName: '整备',
      department: '加工',
      single: true,
      debugHour: 0.0,
      quotaHour: 0.0
    }

    assembling.sequenceNumber = currentProcessNumber + 1
    this.editingRoute.processList.splice(currentProcessNumber, 0, assembling)

    let finish = {
      sequenceNumber: 0,
      processName: '完工',
      department: '',
      single: true
    }
    finish.sequenceNumber = currentProcessNumber + 2
    this.editingRoute.processList.splice(currentProcessNumber + 1, 0, finish)
  }

  /**
   * 修改工艺路线后重新绑定工序号
   */
  private sequencingProcess() {
    for (let i = 0; i < this.editingRoute.processList.length; i++) {
      this.editingRoute.processList[i].sequenceNumber = i + 1
    }
  }

  /**
   * 如果受编辑的工艺路线为空 则添加一条空工艺
   */
  private ifRouteEmptyAddOneProcess() {
    if (this.editingRoute.processList.length == 0) {
      let emptyProcess = {
        sequenceNumber: 0,
        processName: '',
        department: '',
        single: true,
        debugHour: 0.0,
        quotaHour: 0.0
      }
      this.editingRoute.processList.push(emptyProcess)
    }
  }

  /**
   * 编辑工艺路线 - 保存时对工艺路线数据进行参数校验
   */
  private validateSubmitProcessList() {
    // 工艺路线至少包括两条工序 且 最后两道工序是整备和完工
    // 调试工时和定额工时如果没填默认设置为0
    console.log('提交的工序列表：')
    console.log(this.editingRoute.processList)
    let length = this.editingRoute.processList.length
    if (length < 2) {
      this.$alert('工艺路线应该以【整备】和【完工】结束', '错误提示')
      return false
    } else {
      for (let i = 0; i < this.editingRoute.processList.length; i++) {
        let currentProcess = this.editingRoute.processList[i]
        if (currentProcess.processName.length == 0) {
          this.$alert('工序' + (i + 1) + '不能为空', '错误提示')
          return false
        }
        if (currentProcess.department == '加工') {
          if (!/^[0-9]+([.][0-9]{1,2})?$/.test(currentProcess.debugHour)) {
            if (currentProcess.debugHour == '') {
              currentProcess.debugHour = 0
              this.processList[i].debugHour = 0
            } else {
              this.$alert('工序' + (i + 1) + '调试工时请输入整数或1到2位小数', '错误提示')
              return false
            }
          }
          if (!/^[0-9]+([.][0-9]{1,2})?$/.test(currentProcess.quotaHour)) {
            if (currentProcess.quotaHour == '') {
              currentProcess.quotaHour = 0
              this.processList[i].quotaHour = 0
            } else {
              this.$alert('工序' + (i + 1) + '定额工时请输入整数或1到2位小数', '错误提示')
              return false
            }
          }
        }
      }
      let processFinish = this.editingRoute.processList[length - 1]
      let processAssemblng = this.editingRoute.processList[length - 2]
      console.log(processFinish)
      console.log(processAssemblng)
      if (processAssemblng.processName != '整备' || processFinish.processName != '完工') {
        this.$alert('工艺路线应该以【整备】和【完工】结束', '错误提示')
      } else {
        return true
      }
    }
  }

  /**
   * 删除工艺路线
   */
  deleteRoute(route) {
    this.$confirm('您确定删除该工艺路线？', '操作提示', {
      cancelButtonText: '取消',
      confirmButtonText: '确定',
      type: 'warning'
    }).then(() => {
      this.deleteRouteConfirm(route.versionId)
    })
  }
  @vuexProcess.Action DELETE_VERSION: any
  async deleteRouteConfirm(versionId) {
    let result = await this.DELETE_VERSION({ versionId: versionId })
    if (result) {
      this.getProcessRouteList()
    }
  }

  /**
   * 工艺路线投产
   */
  putIntoProduction(route) {
    this.putIntoProducing(route)
  }
  async putIntoProducing(route) {
    let versionIdList: any = []
    versionIdList.push(route.versionId)
    let param = {
      producingId: this.pageProduct.producingId,
      versionIdList: versionIdList
    }
    let res = await designProcess(param)
    if (res) {
      this.getProcessRouteList()
    }
  }

  /**
   * 工艺路线投产审批
   */
  routeApproval(route) {}

  /**
   * 工序输入框输入提示
   * 注意返回建议列表的数据格式
   * 需要是：{ value:"value" }
   */
  querySearch(queryString, cb) {
    let tempObjArray: any = []
    for (const iterator of this.processNameList) {
      let tempObj = {
        value: iterator
      }
      tempObjArray.push(tempObj)
    }
    var processList = tempObjArray
    var results = queryString ? processList.filter(this.createFilter(queryString)) : processList
    // 调用 callback 返回建议列表的数据
    cb(results)
  }
  createFilter(queryString: string) {
    return restaurant => {
      return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    }
  }
  /****************************************************************************************** */
  /****************************************************************************************** */
  /****************************************************************************************** */
  /****************************************************************************************** */
  /****************************************************************************************** */
  /****************************************************************************************** */
  versionList: any = []
  // versionList: any = [
  //   {
  //     versionId: 55,
  //     versionName: '01',
  //     createTime: '2021-11-23 10:51',
  //     drawingNumber: '8GCZ08020100',
  //     productName: '齿芯',
  //     materialQuality: '',
  //     remark: '',
  //     state: null,
  //     versionState: null,
  //     processList: [
  //       {
  //         sequenceId: 401,
  //         versionId: 55,
  //         sequenceNumber: 1,
  //         processName: '粗车',
  //         department: '加工',
  //         supplier: '',
  //         single: true,
  //         debugHour: 0.0,
  //         quotaHour: 11.3
  //       },
  //       {
  //         sequenceId: 402,
  //         versionId: 55,
  //         sequenceNumber: 2,
  //         processName: '精车',
  //         department: '加工',
  //         supplier: '',
  //         single: true,
  //         debugHour: 0.0,
  //         quotaHour: 11.3
  //       },
  //       {
  //         sequenceId: 403,
  //         versionId: 55,
  //         sequenceNumber: 3,
  //         processName: '钻孔',
  //         department: '加工',
  //         supplier: '',
  //         single: true,
  //         debugHour: 0.0,
  //         quotaHour: 11.3
  //       },
  //       {
  //         sequenceId: 404,
  //         versionId: 55,
  //         sequenceNumber: 4,
  //         processName: '过丝',
  //         department: '加工',
  //         supplier: '',
  //         single: true,
  //         debugHour: 0.0,
  //         quotaHour: 11.3
  //       },
  //       {
  //         sequenceId: 405,
  //         versionId: 55,
  //         sequenceNumber: 5,
  //         processName: '整备',
  //         department: '加工',
  //         supplier: '',
  //         single: true,
  //         debugHour: 0.0,
  //         quotaHour: 11.3
  //       },
  //       {
  //         sequenceId: 406,
  //         versionId: 55,
  //         sequenceNumber: 6,
  //         processName: '完工',
  //         department: '',
  //         supplier: '',
  //         single: true,
  //         debugHour: 0.0,
  //         quotaHour: 11.3
  //       }
  //     ]
  //   }
  // ]
  /************************************************************************** */
  /************************************************************************** */
  /************************************************************************** */
  /************************************************************************** */
  /************************************************************************** */
  // public $refs!: {
  //   addDialog: any
  //   deleteProcess: any
  // }

  // 工艺版本查询条件
  queryProcessVersionFilters: any = {
    drawingNumber: '',
    page: 1,
    pageSize: 15
  }

  @vuexProcess.Action GET_PROCESS_DATEBASE: any

  @vuexProcess.State versionTotalNum: any
  @vuexProcess.State sixData: any

  // processManagement() {
  //   this.$refs.deleteProcess.open()
  // }

  /**
   * 清空查询条件
   */
  clear() {
    this.queryProcessVersionFilters = {
      drawingNumber: '',
      page: 1,
      pageSize: 15
    }
    this.queryProcessVersion()
  }
  /**
   * 修改工艺版本
   * 路由跳转
   */
  editProcess(process) {
    console.log('修改工艺版本，即将跳转......')
    console.log(process)
    this.$store.commit('TwoProcess/SET_PRODUCT_ON_MODIFY_VERSION', process)
    this.$router.push({
      name: 'add-process-detail',
      params: {
        inType: '2'
      }
    })
  }

  /**
   * 删除工艺版本
   */
  async deleteSix(versionId) {
    let result = await this.DELETE_VERSION({ versionId: versionId })
    if (result) {
      this.GET_PROCESS_DATEBASE({ ...this.queryProcessVersionFilters })
    }
  }

  /**
   * 工艺版本查询
   */
  queryProcessVersion() {
    this.GET_PROCESS_DATEBASE({ ...this.queryProcessVersionFilters })
  }

  createProcess() {
    // 添加工艺版本的对话框
    // this.$refs.addDialog.open(false)
  }

  // 分页功能
  handleSizeChange(val) {
    this.queryProcessVersionFilters.pageSize = val
    this.queryProcessVersion()
  }
  handleCurrentChange(val) {
    this.queryProcessVersionFilters.page = val
    this.queryProcessVersion()
  }

  async sixDoubleClick(row) {
    console.log('双击查看工艺版本，即将跳转......')
    console.log(row)
    this.$store.commit('TwoProcess/SET_PRODUCT_ON_MODIFY_VERSION', row)
    this.$router.push({
      name: 'add-process-detail',
      params: {
        inType: '7'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
// 通知单卡片区域
.notice-cards-panel {
  padding: 20px 5px;
  height: 700px;
  overflow-y: scroll;
  scrollbar-width: none;
  .notice-card {
    width: 333px;
    height: 100px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    box-shadow: darkgrey 0px 0px 2px 1px;
    .percent-circle {
      float: left;
      padding-top: 10px;
      padding-left: 20px;
      margin-right: 20px;
    }
    .card-title {
      padding-top: 10px;
      padding-left: 10px;
      font-size: 16px;
      font-family: 'STHeiti Light';
    }
    .card-content {
      font-size: 12px;
      padding-left: 10px;
      margin-top: 10px;
      color: #848484;
      line-height: 25px;
    }
  }
  .notice-card:hover {
    cursor: pointer;
  }
}
// 产品卡片区域
.product-cards-panel {
  padding: 20px 5px;
  height: 700px;
  overflow-y: scroll;
  scrollbar-width: none;
  .product-card {
    width: 250px;
    height: 100px;
    float: left;
    box-shadow: darkgrey 0px 0px 2px 1px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    box-shadow: darkgrey 0px 0px 2px 1px;
  }
  .card-title {
    width: 200px;
    padding-top: 10px;
    padding-left: 10px;
    font-size: 16px;
    font-family: 'STHeiti Light';
  }
  .card-content-short {
    font-size: 12px;
    padding-left: 10px;
    margin-top: 10px;
    color: #848484;
    line-height: 25px;
  }
  .card-content-long {
    font-size: 12px;
    padding-left: 10px;
    margin-top: 10px;
    color: #848484;
    line-height: 20px;
  }
  .product-card:hover {
    cursor: pointer;
  }
}
// 工艺路线区域
.process-routes-panel {
  border: steelblue solid 1px;
}

/************************ */

.total {
  float: left;
  // display: inline;
  border: 1px solid #ccc;
  margin-right: 30px;
  .total_title {
    width: 200px;
    color: #000;
    height: 260px;
    line-height: 30px;
    text-align: center;
    .text {
      font-size: 18px;
      font-weight: bold;
      margin: 0 5px;
    }
  }

  &:hover {
    color: #000;
    background: #fff;
  }
}
.breadcrumb {
  height: 25px;
  width: 100%;
  border: none;
}
.s1 {
  display: none;
}
.s2 {
  height: 100px;
  display: none;
}

//通知单滚动
.notice-box {
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}

.notice-item {
  height: 270px;
}

/*隐藏掉滚动条*/
.notice-box::-webkit-scrollbar {
  display: none;
}

.layout .operation {
  overflow-x: auto;
}
.el-tabs {
  padding: 0 20px;
  margin: 0px 10px 0;
  border: 1px solid #e4e7ed;
  background-color: #fff;
  .el-tabs__content {
    min-width: 1200px;
  }
}
</style>